<template>
  <div class="eachMap">
    <div class="map">
      <esri-map :mapId="mapId"></esri-map>
      <div class="menu">
        <each-map-menu :mapId="mapId" :ecchMapList="ecchMapList_1" ></each-map-menu>
      </div>
    </div>
  </div>
</template>
<script>
  import esriMap from './esriMap'
  import eachMapMenu from  './Menu'
  import esriLoader from 'esri-loader'

  export default {
    components: {
      esriMap,
      eachMapMenu
    },
    props:{
      mapId:{
        type:String,
        default:"mainMap"
      }
    },
    data(){
      return{
        ecchMapList_1:{
          menuList:[
            {
              icon:"icon-dingweitu",
              ismenu:true,
              name:"定位",
              code:"position"
            },
            {
              icon:"icon-sousuo",
              ismenu:true,
              name:"搜索",
              code:"search"
            },
            {
              icon:"icon-tuceng",
              ismenu:true,
              name:"图层控制",
              code:"layer"
            },
            {
                icon:"icon-measure",
                ismenu:true,
                name:"测量工具",
                code:"measure",
                model:false,
                children:[{
                  icon:"icon-length",
                  ismenu:true,
                  name:"测量距离",
                  code:"measureLine"
                },
                  {
                    icon:"icon-mianji",
                    ismenu:true,
                    name:"测量面积",
                    code:"measurePolygon"
                  }]
            },
            {
              icon:"icon-dingwei1",
              ismenu:true,
              name:"清除图标",
              code:"clearGraphic"
            },
            {
              icon:"icon-qingchu1",
              ismenu:true,
              name:"清除数据",
              code:"clearLayer"
            },
            {
              icon:"icon-quanping",
              ismenu:true,
              name:"全屏",
              code:"full"
            },
          ]
        }
      }
    },
    mounted:function(){
/* console.log(this.GLOBAL.maps["towMap"]);
       var mapIds = ["mainMap","towMap","treeMap","fourMap"];
        mapEventManager.initExtentEvent(mapIds);
         esriLoader.loadModules(["widget/MapManager"])
    .then(([MapManager]) => {
      var map = MapManager.getMap("towMap");
      console.log(map);
      
      }) */

    }
  }

</script>
<style>
.eachMap{
  height: 100%;
  width: 100%;
}
  .menu{
    position: relative;
    bottom: 72px;
    z-index: 11000;
    text-align:center;
    margin:auto;
  }
  .mapAndMenu{
  border-right: 1px solid #d9d9d8;
  }
  .towMapDiv{
  border-bottom: 1px solid #d9d9d8;
  }
  .treeMapDIv{
     border-top: 1px solid #d9d9d8;
    }
  .fourMapDiv{
    border-left: 1px solid #d9d9d8;
    }

      .iview-each-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        position: relative;
        display: flex;
       /* bottom: 10px;*/
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin:0 15px;
      }
    .iview-each-menu ul {
      display: flex;
      background-color: rgba(255,255,255,0.5);
      border:solid 1px #cdcdcd;
    }
    .iview-each-menu ul li{
     margin:0 8px;

    }
</style>
